<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('月报报表')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
    <div class="ui-layout-west">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 住房信息
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新"><i class="fa fa-refresh"></i></button>
                </div>
                <div class="ui-layout-content">
                    <div id="tree" class="ztree"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="ui-layout-center">
        <div class="container-div">
            <div class="row">
                <div class="col-sm-12 search-collapse">
                    <form id="formId">
                        <input type="hidden" id="houseId" name="houseId">
                        <div class="select-list">
                            <ul>
                                <li>
                                    <label>热表表号：</label>
                                    <input type="text" name="meterNo"/>
                                </li>
                                <li>
                                    <label>所属住房：</label>
                                    <input type="text" name="houseName"/>
                                </li>
                                <li class="select-time">
                                    <label>统计月份： </label>
                                    <input type="text" class="time-input" id="startTime" th:value="${startTime}" data-type="month" placeholder="开始月份" name="params[beginTime]"/>
                                    <span>-</span>
                                    <input type="text" class="time-input" id="endTime" th:value="${endTime}" data-type="month" placeholder="结束月份" name="params[endTime]"/>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>

                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table" data-show-print="true"></table>
                </div>
            </div>
        </div>
    </div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script th:inline="javascript">
    var prefix = ctx + "report/heat";

    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({ initClosed: panehHidden, west__size: 185 });
        // 回到顶部绑定
        if ($.fn.toTop !== undefined) {
            var opt = {
                win:$('.ui-layout-center'),
                doc:$('.ui-layout-center')
            };
            $('#scroll-up').toTop(opt);
        }

        queryHouseTree();
        queryReportList();
    });

    function queryReportList() {
        var options = {
            url: prefix + "/dayList",
            modalName: "月报统计",
            showFooter: true,
            sidePagination: 'client',
            columns: [
                {
                    field: 'reportDate',
                    title: '统计月份',
                    footerFormatter:function (value) {
                        return "合计";
                    }
                },
                {
                    field: 'houseName',
                    title: '所属住房'
                },
                {
                    field: 'meterNo',
                    title: '热表表号'
                },
                {
                    field: 'minHeat',
                    title: '期初热量'
                },
                {
                    field: 'maxHeat',
                    title: '期末热量'
                },
                {
                    field: 'diffHeat',
                    title: '累计用量',
                    footerFormatter:function (value) {
                        var sumLimit = 0;
                        for (var i in value) {
                            sumLimit += parseFloat(value[i].diffHeat);
                        }
                        return sumLimit.toFixed(4);
                    }
                }]
        };
        $.table.init(options);
    }

    function queryHouseTree() {
        var url = ctx + "basic/house/treeData";
        var options = {
            url: url,
            expandLevel: 1,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#houseId").val(treeNode.id);
            $.table.search();
        }
    }

    $('#btnExpand').click(function() {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function() {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function() {
        queryHouseTree();
    });
</script>
</body>
</html>